<!--_meta 作为公共模版分离出去-->
<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    {include file="public/_head"}
    <link href="/static/lib/webuploader/0.1.5/webuploader.css" rel="stylesheet" type="text/css"/>
    <title>添加等级</title>
    <style>
        .input-text[type="number"] {
            width: 100%;
        }
    </style>
</head>
<body>
<article class="cl pd-20">
    <form action="" method="post" class="form form-horizontal" id="form-member-add">
        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-3">上传图片：</label>
            <div class="formControls col-xs-8 col-sm-9">
                <div id="uploader-demo">
                    <div id="fileList" class="uploader-list">
                        {if condition="$data.picture"}
                            <img src="/{$data.picture}" alt="" width="100" height="100">
                        {else /}
                        {/if}
                    </div>
                    <div id="filePicker">选择图片</div>
                    <input type="hidden" id="picture" value="{$data.picture|default=''}">
                </div>
            </div>
        </div>
        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-3">排序：</label>
            <div class="formControls col-xs-8 col-sm-9">
                <input type="number" class="input-text" value="{$data.sort|default=''}" id="sort"
                       name="sort">
            </div>
        </div>
        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-3">状态：</label>
            <div class="formControls col-xs-8 col-sm-9 skin-minimal">
                <div class="radio-box">
                    <input name="status" type="radio" id="status-1" value="1" {$data.status == '启用'?'checked':''} {$data.status == ''?'checked':''}>
                    <label for="status-1">启用</label>
                </div>
                <div class="radio-box">
                    <input type="radio" id="status-2" name="status" value="2" {$data.status == '禁用'?'checked':''}>
                    <label for="status-2">禁用</label>
                </div>
            </div>
        </div>
        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-3">类型：</label>
            <div class="formControls col-xs-8 col-sm-9 skin-minimal">
                <div class="radio-box">
                    <input type="radio" id="type-1" name="type" value="1" {$data.type == 'web'?'checked':''} {$data.type == ''?'checked':''}>
                    <label for="type-1">web</label>
                </div>
                <div class="radio-box">
                    <input type="radio" id="type-2" name="type" value="2" {$data.type == 'app'?'checked':''}>
                    <label for="type-2">app</label>
                </div>
            </div>
        </div>
        <input type="hidden" id="id" value="{$data.id|default=''}">
        <div class="row cl">
            <div class="col-xs-8 col-sm-9 col-xs-offset-4 col-sm-offset-3">
                <input class="btn btn-primary radius" type="button" onclick="submit1()"
                       value="&nbsp;&nbsp;提交&nbsp;&nbsp;">
            </div>
        </div>
    </form>
</article>

{include file="public/_footer" /}
<script type="text/javascript" src="/static/lib/webuploader/0.1.5/webuploader.min.js"></script>
<script type="text/javascript">
    var $list = $("#fileList");
    // 初始化Web Uploader
    var uploader = WebUploader.create({

        // 选完文件后，是否自动上传。
        auto: true,

        // swf文件路径
        swf: '/static/lib/webuploader/0.1.5/js/Uploader.swf',

        // 文件接收服务端。
        server: '/upload/aloneUpload',

        // 选择文件的按钮。可选。
        // 内部根据当前运行是创建，可能是input元素，也可能是flash.
        pick: '#filePicker',

        // 只允许选择图片文件。
        accept: {
            title: 'Images',
            extensions: 'gif,jpg,jpeg,bmp,png',
            mimeTypes: 'image/*'
        }
    });
    // 当有文件添加进来的时候
    uploader.on('fileQueued', function (file) {
        var $li = $(
            '<div id="' + file.id + '" class="file-item thumbnail">' +
            '<img>' +
            '<div class="info">' + file.name + '</div>' +
            '</div>'
            ),
            $img = $li.find('img');
        // $list为容器jQuery实例
        $list.html($li);

        // 创建缩略图
        // 如果为非图片文件，可以不用调用此方法。
        // thumbnailWidth x thumbnailHeight 为 100 x 100
        uploader.makeThumb(file, function (error, src) {
            if (error) {
                $img.replaceWith('<span>不能预览</span>');
                return;
            }

            $img.attr('src', src);
        }, 100, 100);
    });
    // 文件上传过程中创建进度条实时显示。
    uploader.on('uploadProgress', function (file, percentage) {
        var $li = $('#' + file.id),
            $percent = $li.find('.progress span');

        // 避免重复创建
        if (!$percent.length) {
            $percent = $('<p class="progress"><span></span></p>')
                .appendTo($li)
                .find('span');
        }

        $percent.css('width', percentage * 100 + '%');
    });

    // 文件上传成功，给item添加成功class, 用样式标记上传成功。
    uploader.on('uploadSuccess', function (file, response) {
        $("#picture").val(response.data.src);
        $('#' + file.id).addClass('upload-state-done');
    });

    // 文件上传失败，显示上传出错。
    uploader.on('uploadError', function (file) {
        var $li = $('#' + file.id),
            $error = $li.find('div.error');

        // 避免重复创建
        if (!$error.length) {
            $error = $('<div class="error"></div>').appendTo($li);
        }

        $error.text('上传失败');
    });

    // 完成上传完了，成功或者失败，先删除进度条。
    uploader.on('uploadComplete', function (file) {
        $('#' + file.id).find('.progress').remove();
    });

    function submit1() {
        let picture = $('#picture').val();
        let sort = $('#sort').val();
        let status = $('input[name="status"]:checked').val();
        let type = $('input[name="type"]:checked').val();
        if (!picture) {
            $.mag('请上传礼物图片');
            return;
        }
        let data = {
            id: $("#id").val(),
            picture: picture,
            sort: sort,
            status: status,
            type: type
        };
        $.ajax1(this, '/banner/save', 'post', data, function () {
            $.mag('添加成功', 1, 3000);
            parent.location.href = "/banner/index";
        });
    }
</script>
<!--/请在上方写此页面业务相关的脚本-->
</body>
</html>